<template>
  <hooyn-nav-bar
    class="header"
    leftIcon=""
    :title="$route.query.telite || '党群服务中心'"
    leftIconfont="false"
    fontSize="16px"
    leftIconColor="#fff"
    color="#fff"
    backgroundColor="#68A0F7"
    :returnNav="true"
  />
  <div class="jli">
    <div class="title">简介</div>
    <div class="xq" v-html="lsit"></div>
    <div class="arrow" :class="{ 'arrow-top': state.shwoIntro, arrow: true }">
      <van-icon
        :name="state.shwoIntro ? 'arrow-up' : 'arrow-down'"
        v-if="state.dataitem.item.length > state.introLenght"
        @click="state.shwoIntro = !state.shwoIntro"
      />
    </div>
    <div class="title">地址</div>
    <div class="dz">{{ state.dataitem.Address }}</div>
    <!-- <div id="container" ref="container"></div> -->
    <cs />
    <div class="title">电话</div>
    <a class="dz phon" :href="'tel:' + state.dataitem.Phone">{{
      state.dataitem.Phone
    }}</a>
    <div class="title" @click="listd">服务时间</div>
    <div class="dz" v-html="state.dataitem.timer"></div>
  </div>
</template>
<script setup >
import cs from "./cs.vue";
import $api from "@/utils/api";
const route = useRoute();
const router = useRouter();

const state = reactive({
  dataitem: "",
  introLenght: 240,
  shwoIntro: false,
  data: [
    {
      id: 1,
      titlle: [22.537731, 114.051251],
    },
    {
      id: 2,
      titlle: [22.796511, 113.874186],
    },
    {
      id: 3,
      titlle: [22.806704, 113.86371],
    },
    {
      id: 4,
      titlle: [22.773077, 113.852176],
    },
    {
      id: 5,
      titlle: [22.78131, 113.840965],
    },
    {
      id: 6,
      titlle: [22.798012, 113.843161],
    },
  ],
  map: null,
});
const initMap = () => {
  let item = "";
  let listd = "";
  //定义地图中心点坐标
  if (route.query.id == 1) {
    item = 22.772978;
    listd = 113.858235;
  } else if (route.query.id == 2) {
    item = 22.796511;
    listd = 113.874186;
  } else if (route.query.id == 3) {
    item = 22.806704;
    listd = 113.86371;
  } else if (route.query.id == 4) {
    item = 22.773077;
    listd = 113.852176;
  } else if (route.query.id == 5) {
    item = 22.78131;
    listd = 113.840965;
  } else if (route.query.id == 6) {
    item = 22.798012;
    listd = 113.843161;
  }
  var center = new TMap.LatLng(item, listd);
  //定义map变量，调用 TMap.Map() 构造函数创建地图
  var map = new TMap.Map(document.getElementById("container"), {
    center: center, //设置地图中心点坐标
    zoom: 17.2, //设置地图缩放级别
  });
  new TMap.MultiMarker({
    map: map, //指定地图容器
    //样式定义
    styles: {
      //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
      myStyle: new TMap.MarkerStyle({
        width: 25, // 点标记样式宽度（像素）
        height: 35, // 点标记样式高度（像素）
        src: "../../assets/dingwei.png", //图片路径
        //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
        anchor: { x: 16, y: 32 },
      }),
    },
    //点标记数据数组
    geometries: [
      {
        id: "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
        styleId: "myStyle", //指定样式id
        position: new TMap.LatLng(item, listd), //点标记坐标位置
        properties: {
          //自定义属性
          title: "marker",
        },
      },
    ],
  });
};
const Enterprise = () => {
  $api.buildingservicesitem({ ID: route.query.id }).then((res) => {
    if (res.message.length > 0) {
      state.dataitem = res.message[0];
    }
  });
};

const lsit = computed(() => {
  if (state.shwoIntro) {
    return state.dataitem.item;
  } else {
    let str = "";
    if (state.dataitem.item <= state.introLenght) {
      str = state.dataitem.item;
    } else {
      str = state.dataitem.item.substring(0, state.introLenght) + "...";
    }

    return str;
  }
});
onMounted(() => {
});
const listd = () => {
  router.push({
    path: "/cs",
  });
};
watch(
  () => route.query.id,
  () => {
    if (route.name === "serviceitem" && route.query.id) {
      Enterprise();
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>
<style lang="scss" scoped>
#container {
  border-radius: 5px;
  margin: 1rem 0;
  overflow: hidden;
  position: relative;
  height: 10rem;
  width: 100%;
  :deep().rotate-circle {
    display: none !important;
  }
  :deep() .tmap-zoom-control {
    display: none !important;
  }
  :deep().logo-text {
    display: none !important;
  }
  :deep().tmap-scale-text {
    // display: none !important;
  }
  :deep() a {
    position: absolute;
    bottom: 0;
    right: -190%;
  }
  :deep().tmap-scale-line {
    border-color: #000 !important;
  }
}
.arrow {
  text-align: center;
  bottom: 0px;
  .van-icon {
    font-size: 1.2rem;
    color: #383b42;
  }
  img {
    width: 1.2rem;
    height: 1.2rem;
    position: relative;
    top: 2px;
  }
  &.arrow-top {
    img {
      transform: rotateZ(180deg);
    }
  }
}
.jli {
  padding: 1rem 0.8rem;
  .title {
    font-size: 1rem;
    font-weight: 500;
  }
  .xq {
    text-indent: 2em;
    margin-top: 0.4rem;
    font-size: 0.9rem;
    line-height: 1.5rem;
    margin-bottom: 0.4rem;
  }
  .dz {
    margin-top: 0.4rem;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    line-height: 1.4rem;
    color: #000;
  }
  .phon {
    display: block;
    font-weight: 500;
    color: #000;
  }
}
</style>